<template>
  <a-drawer
    v-bind="drawer"
    v-model:visible="visibleValue"
  >
    <!-- form -->
    <div class="storeManageDetail__content">
      <div
        class="storeManageDetail__item"
        v-for="item in formData"
        :key="item.title"
      >
        <div class="storeManageDetail__title">
          <div class="storeManageDetail__title--line"></div>
          {{ item.title }}
        </div>
        <a-form>
          <a-form-item
            v-for="child in item.list"
            :key="child.key"
            :label="child.title"
          >
            {{ child.prefix }}{{ data[child.key] }}
            <span v-if="child.after">{{ child.after }}</span>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <!-- footer -->
    <div class="storeManageDetail__footer">
      <a-button
        style="margin-right: 8px"
        @click="visibleValue = false"
      >取消</a-button>
      <a-button
        type="primary"
        @click="visibleValue = false"
      >确定</a-button>
    </div>
  </a-drawer>
</template>
<script>
import { ref, defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
  name: '',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['update:visible'],
  computed: {
    visibleValue: {
      get () {
        return this.visible;
      },
      set (value) {
        this.$emit('update:visible', value);
      },
    },
  },
  setup () {
    const drawer = ref({
      title: '店铺详情',
      width: 800,
    });
    const state = reactive({
      formData: [
        {
          title: '基本信息',
          list: [
            { title: '店铺ID', key: 'shopId' },
            { title: '店铺名称', key: 'shopName' },
            { title: '店铺状态', key: 'status' },
            { title: '店铺版本', key: 'shopType' },
            { title: '最后活跃时间', key: 'visitTimes' },
            { title: '开店时间', key: 'createTimes' },
            { title: '到期时间', key: 'expirationTimes' },
            {
              title: '付款金额',
              key: 'payAmount',
              prefix: '￥',
              after: '(包含版本金额、直播金额、短信金额）',
            },
          ],
        },
        {
          title: '营业信息',
          list: [
            { title: '用户数量', key: 'userNumber' },
            { title: '商品数量', key: 'goodsNumber' },
            { title: '订单数量', key: 'orderNumber' },
            { title: '交易金额', key: 'orderAmount', prefix: '￥' },
          ],
        },
        {
          title: '直播统计',
          list: [
            { title: '直播数量', key: 'liveNumber' },
            { title: '开播数量', key: 'beginNumber', after: '(已到开播时间,且已转录为vid)' },
            { title: '观看用户数量', key: 'liveUserNumber' },
          ],
        },
        {
          title: '其他信息',
          list: [
            { title: '微信商户号', key: 'mchId' },
            { title: '微信公众号', key: 'mpAppId' },
            { title: '所属管理员', key: 'phonenumber' },
          ],
        },
      ],
    });

    return {
      ...toRefs(state),
      drawer,
    };
  },
});
</script>
<style lang="less">
.storeManageDetail {
  &__item {
    & + & {
      margin-top: 24px;
      padding-top: 30px;
      border-top: 1px dashed #ddd;
    }
    .ant-form-item {
      margin-bottom: 10px;
    }
    .ant-form-item-label {
      width: 100px;
      margin-right: 20px;
      label {
        color: rgba(0, 0, 0, 0.647058823529412);
      }
    }
    .ant-form-item-children {
      color: rgba(0, 0, 0, 0.847058823529412);
      span {
        margin-left: 7px;
        color: rgba(0, 0, 0, 0.447058823529412);
      }
    }
  }
  &__title {
    margin-bottom: 20px;
    padding-left: 15px;
    color: #333;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    &--line {
      display: inline-block;
      width: 4px;
      height: 14px;
      margin-top: 4px;
      margin-right: 10px;
      vertical-align: top;
      background: #1890ff;
      border-radius: 17px;
    }
  }
  &__content {
    padding: 24px 20px;
  }
  &__footer {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
    border-top: 1px solid #e9e9e9;
  }
}
</style>
